<template>
<!--  <div class="app-container">-->
  <el-dialog :title="title" :visible.sync="visible" width="80%">
    <div id="printArea">
      <div class="print-container ">
      <!-- 表头信息 -->
      <el-descriptions
        class="header-info"
        :column="3"
        :label-style="labelStyle"
        :content-style="contentStyle"
        size="small"
        :colon="false"
      >
        <el-descriptions-item label="盘点单号">{{ goodsInventoryAddForm.sn }}</el-descriptions-item>
        <el-descriptions-item label="盘点时间">{{ goodsInventoryAddForm.inventoryTime }}</el-descriptions-item>
        <el-descriptions-item label="盘点人">{{ goodsInventoryAddForm.inventoryPerson }}</el-descriptions-item>
        <el-descriptions-item label="盘点方法">{{ goodsInventoryAddForm.inventoryMethod }}</el-descriptions-item>
        <el-descriptions-item label="盘点类型">{{ goodsInventoryAddForm.inventoryType }}</el-descriptions-item>
        <el-descriptions-item label="盘点范围">{{ goodsInventoryAddForm.inventoryRange }}</el-descriptions-item>
        <el-descriptions-item label="物料分类" v-if="goodsInventoryAddForm.inventoryRange =='物料分类'">{{ goodsInventoryAddForm.itemTypeNameRange }}</el-descriptions-item>
        <el-descriptions-item label="仓库" v-if="goodsInventoryAddForm.inventoryRange =='仓库'">{{ goodsInventoryAddForm.warehouseName }}</el-descriptions-item>
        <el-descriptions-item label="库区" v-if="goodsInventoryAddForm.inventoryRange =='仓库'">{{ goodsInventoryAddForm.locationName }}</el-descriptions-item>
        <el-descriptions-item label="库位" v-if="goodsInventoryAddForm.inventoryRange =='仓库'">{{ goodsInventoryAddForm.areaName }}</el-descriptions-item>
      </el-descriptions>

      <!-- 表格数据 -->
      <el-table
        :data="goodsInventoryAddForm.productList"
        border
        class="custom-table-class"
        style="width: 100%;margin-top: 20px;"
      >
        <el-table-column label="序号" width="60" type="index" align="center"/>
        <el-table-column prop="itemCode" label="商品编号"  width="150" align="center"/>
        <el-table-column prop="itemName" label="商品名称" width="150" align="center"/>
        <el-table-column prop="specification" label="规格型号" width="100" align="center"/>
        <el-table-column prop="unitOfMeasure" label="单位" width="80" align="center" />
        <el-table-column prop="batchCode" label="批次号" width="150" align="center"/>
        <el-table-column prop="warehouseName" label="仓库" width="100" />
        <el-table-column prop="locationName" label="库区" width="100" />
        <el-table-column prop="areaName" label="库位" width="100" />
        <el-table-column v-if="goodsInventoryAddForm.inventoryMethod == '明盘'"  prop="quantityOnhand" label="库存数量"  align="center" >
        </el-table-column>
        <el-table-column   label="盘点数量"  align="center" />
<!--        <el-table-column prop="diffNum" label="差异" width="80" align="center" />-->
        <el-table-column prop="remark" label="备注" align="center" />
      </el-table>
    </div>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 20px;">
      <el-button type="primary"  @click="print">打印</el-button>
      <el-button type="primary" @click="cancel">返 回</el-button>
    </div>
  </el-dialog>
</template>

<script>


import {getTreeList} from "@/api/mes/wm/warehouse";
import ItemSelect  from "@/components/itemSelect/multi.vue";
import {addPandian, getPandian, updatePandian,updatePandianStatus} from "@/api/mes/wm/pandian";
import UserSingleSelect from "@/components/userSelect/single.vue"
import {genCode} from "@/api/system/autocode/rule";
import {getProductByPId} from "@/api/mes/wm/pandianproduct";
import Template from "@/views/print/printtemplate/list.vue";
import printJS from "print-js";
export default {
  name: 'goodsInventoryAdd',
  components: {Template, UserSingleSelect, ItemSelect},
  props:{
    title:'',
  },
  data() {
    return {
      labelStyle: {
        minWidth: '50px',   // 标签最小宽度
        whiteSpace: 'nowrap',
        textAlign: 'right',
        paddingRight: '10px !important',
        marginBottom: '5px',
        marginTop: '5px'
      },
      contentStyle: {
        whiteSpace: 'nowrap',
        marginBottom: '5px',
        marginTop: '5px'
        // textOverflow: 'ellipsis',
        // overflow: 'hidden'
      },
      warehouseList:[],
      locationList:[],
      areaList:[],
      visible:false,
      disabled:true,
      //自动生成编码
      autoGenFlag:false,
      warehouseInfo:[],
      warehouseOptions:[],
      warehouseProps:{
        multiple: false,
        value: 'pId',
        label: 'pName',
      },
      adminList: [],
      dialogVisible: false,
      // warehouseList: [],
      deptList: [],
      deptListAll: [],
      id: '',
      type: '',
      /** 出库单表单*/
      goodsInventoryAddForm: {
        productList: []
      },
      /** 校验规则 */
      goodsInventoryAddFormRule: {
        // inventory_person_id: { required: true, message: '请选择盘点人', trigger: 'change' },
        // warehouseInfo: { required: true, message: '请选择报仓库', trigger: 'change' },

      },
      warehouseProduct: null
    };
  },
  created() {
  /*  //获取修改按钮带过来的id
    const pandianId = this.$route.query.id
    //将id赋值
    this.goodsInventoryAddForm.id  = pandianId;
    //查询
    if (pandianId){
      this.getList(pandianId);
    }*/

  },
  methods: {
    init(id){
      this.warehouseInfo=[]
      this.visible=true
      this.goodsInventoryAddForm.id  = id;
      this.getList(id)
    },
    print() {
      printJS({
        type: 'html',
        printable: 'printArea',
        documentTitle: '盘点单',
        header: '盘点单',
        // 写入自定义样式landscape portrait
        headerStyle: 'text-align:center;width:100%;margin-top:50px;font-weight: 300;',
        fontSize:'font-size: 20px; ',
        style: `/* 页面设置 */
       /* 页面设置 */
      @page {
        size: A4 landscape; /* A4 横向打印 */
        margin: 1.5cm 0.2cm 0.5cm 0.2cm; /* 上下边距为0.5cm，左右边距为0.2cm */

      }
 .el-table__row {
  line-height:100px
  height: 100px !important; /* 自定义行高 */
}
      /* 全局样式 */
  body {
        font-family: "Microsoft YaHei", sans-serif; /!* 字体 *!/
        font-size: 20px; /!* 字体大小 *!/
        margin: 0;
        padding: 0;
      }

      /* 打印内容容器 */
      .print-container {
        width: 100%;
        padding: 10px; /!* 减少内边距 *!/
        box-sizing: border-box;
      }

      /* 表头信息 */
      .header-info {
        margin-bottom: 10px; /!* 减少表头间距 *!/
      }
      .header-info .el-descriptions-item__content {
        font-weight: bold; /!* 加粗内容 *!/
      }

      /* 表格样式 */
      .el-table {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        height:50px
      }

      .el-table th,
      .el-table td {
        padding: 4px 8px; /!* 减少单元格内边距 *!/
        border: 1px solid #ebeef5; /!* 单元格边框 *!/
        text-align: center; /!* 文本居中 *!/
        line-height:50px
      }
      .el-table th {
        background-color: #f5f7fa; /!* 表头背景色 *!/
        font-weight: bold; /!* 表头加粗 *!/
        line-height:50px
      }

      /!* 打印时隐藏的元素 *!/
      .el-table__empty-block,
      .el-table__empty-text {
        display: none; /!* 隐藏空表格提示 *!/
      }
   `,

        scanStyles: true,
        // 继承样式
        targetStyles: ['*'],
        maxWidth: 1920
      });
    },
    /** 查询修改 */
    getList(pandianId) {
      //查询详情
      getPandian(pandianId).then(response => {
        this.goodsInventoryAddForm=response.data
        // this.getWarehouseList();
        this.$forceUpdate()

        //加载物料
        getProductByPId(this.goodsInventoryAddForm.id).then(response => {
          this.goodsInventoryAddForm.productList=response.data
          // console.log("productList",this.goodsInventoryAddForm.productList)

        });
      });
      this.$forceUpdate()
    },


    // 取消按钮
    cancel() {
      this.visible = false;
      this.$emit('refreshDataList')
     /* localStorage.setItem("IndexRefresh", true);
      // 调用全局挂载的方法，关闭当前页
      this.$store.dispatch("tagsView/delView", this.$route)
      this.$router.go(-1)*/
    },

    //选择默认的仓库、库区、库位
    handleWarehouseChanged(obj){
      console.log("handleWarehouseChanged",obj)
      const selectedNodes = this.$refs.selectck.getCheckedNodes();
      console.log("selectedNodes",selectedNodes)
      console.log('选中的名称11:',selectedNodes[0].pathLabels)
      if(obj !=null){
        this.goodsInventoryAddForm.warehouseId = obj[0];
        this.goodsInventoryAddForm.locationId = obj[1];
        this.goodsInventoryAddForm.areaId = obj[2];
        this.goodsInventoryAddForm.warehouseName=selectedNodes[0].pathLabels[0]
        this.goodsInventoryAddForm.locationName=selectedNodes[0].pathLabels[1]
        this.goodsInventoryAddForm.areaName=selectedNodes[0].pathLabels[2]
      }
    },
    getWarehouseList(){
      getTreeList().then( response =>{
        if(response.data){
          this.warehouseOptions = response.data.filter((el) =>{
            return el.warehouseCode.indexOf('VIR') == -1;
          });;
        }
        console.log("1111",this.warehouseOptions)
        this.warehouseOptions.map(w =>{
          w.children.map(l =>{
            let lstr =JSON.stringify(l.children).replace(/locationId/g,'lId').replace(/areaId/g, 'pId').replace(/areaName/g,'pName');
            l.children = JSON.parse(lstr);
          });

          let wstr = JSON.stringify(w.children).replace(/warehouseId/g,'wId').replace(/locationId/g, 'pId').replace(/locationName/g,'pName');
          w.children =  JSON.parse(wstr);

        });
        let ostr=JSON.stringify(this.warehouseOptions).replace(/warehouseId/g,'pId').replace(/warehouseName/g, 'pName');
        this.warehouseOptions = JSON.parse(ostr);
        console.log('2222',JSON.parse(ostr))
      });
    },
  }


}
</script>
<style scoped>
.print-container {
  padding: 20px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 20px;
}

.header-info {
  margin-bottom: 20px;
}

/* 设置表头行高 */
.el-table ::v-deep .el-table__header tr {
  height: 60px !important;
}

/* 设置单元格内边距（可选） */
.el-table ::v-deep .el-table__cell {
  padding: 8px 0 !important;
}
/* 打印样式优化 */
/*@media print {
  body {
    margin: 0;
    padding: 0;
  }
  .print-container {
    padding: 0;
    font-size: 12px; !* 减小字体大小 *!
  }

  .el-descriptions__body {
    background: transparent !important;
  }

  .el-table__header-wrapper th,
  .el-table__body-wrapper td {
    padding: 2px 5px !important; !* 减小单元格内边距 *!
    font-size: 12px; !* 减小字体大小 *!
  }

  .el-table__header-wrapper th {
    background-color: #f5f7fa !important; !* 调整表头背景色 *!
    border: 1px solid #ebeef5 !important; !* 调整表头边框 *!
  }

  .el-table__body-wrapper td {
    border: 1px solid #ebeef5 !important; !* 调整单元格边框 *!
  }

  .el-table {
    width: 100% !important;
    border-collapse: collapse; !* 合并边框 *!
    border-spacing: 0;
  }

}*/
</style>
